<template>
  <el-dialog append-to-body title="收款单预览&打印" :visible.sync="payInfoTableVisible">
    <div id="payinfoBox" style="margin-right:10px">
      <el-form>
        <!--        表头-->
        <div style="text-align: center">
          <span style="font-size: 40px;width:100%;font-weight: bolder">北方暖暖滴供热有限公司收费单</span>
        </div>
        <!--        表格内容-->
        <el-row :gutter="24">
          <table frame="below" cellspacing="0" style="margin-left: 5px;width: 100%;font-size:20px;margin-right: 5px;margin-top: 10px">
            <tr>
              <td style="text-align: center;border: none">单据日期：{{ payOrderinfoDataSource.orderTime }}</td>
              <td colspan="4" style="text-align: center">缴费方式：{{ getHousehodePayTypeListDictsValue(payOrderinfoDataSource.orderPayType) }}</td>
              <td colspan="2" style="text-align: right">单据号：{{ Math.random().toString(36).toUpperCase().slice(2) }}</td>
            </tr>
          </table>
          <table cellspacing="0" style="margin-left: 5px;width: 100%;font-size:20px;margin-right: 5px;margin-top: 10px">
            <tr>
              <td style="text-align: center">户住：{{ payOrderinfoDataSource.householdName }}</td>
              <td colspan="4" style="text-align: center">状态：{{ getHouseholdStatusListDictsValue(payOrderinfoDataSource.householdStatus) }}</td>
              <td colspan="2" style="text-align: right">地址：{{ getDictsValue(payOrderinfoDataSource.cotyCode,payOrderInfo) }}</td>
            </tr>
          </table>
          <table border="1" cellspacing="0" style="margin-left: 5px;width: 100%;font-size:20px;margin-right: 5px">
            <thead>
              <tr>
                <th>项目名称</th>
                <th>供热年度</th>
                <th>面积</th>
                <th>单价</th>
                <th>金额</th>
                <th>滞纳金</th>
                <th>总金额</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in allPaidInfoArray">
                <td style="text-align: center">{{ item.expenseName }}</td>
                <td style="text-align: center">{{ item.yearsBegin }} - {{ item.yearsEnd }}</td>
                <td style="text-align: right">{{ item.heatArea }} ㎡</td>
                <td style="text-align: right">{{ item.amountPrice }} ￥</td>
                <td style="text-align: right">{{ item.amountReceivable }} ￥</td>
                <td style="text-align: right">{{ item.lateFee === null ? 0.00 : item.lateFee }} ￥</td>
                <td style="text-align: right">{{ item.amountReceivable }} ￥</td>
              </tr>
              <tr>
                <td style="text-align: center">收款人：{{ payOrderinfoDataSource.operaPerson }}</td>
                <td colspan="4" style="text-align: center">实收大写：{{ reUpcaseMoney(payOrderinfoDataSource.orderPayAmount) }}</td>
                <td colspan="2" style="text-align: right">实收合计：{{ payOrderinfoDataSource.orderPayAmount }} ￥</td>
              </tr>
            </tbody>
          </table>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button @click="cancelPrintPayInfo">关 闭</el-button>
      <el-button type="primary" @click="getToPrintPayInfo">打印账单</el-button>
    </div>
  </el-dialog>
</template>

<script>
const { getAllHasPaidPayInfoByHouseCode } = require('@/api/ht/zffygl/zfxxgl')
const { getDictsList, getParentDictsList, getDictsByType, getTreeDictsByType } = require('@/api/dicts')
const { Message } = require('element-ui')
const { digitUppercase } = require('@/utils/MoneyUtil')
export default {
  name: 'SkdModal',
  props: {
    payOrderInfo: {
      type: Object,
      default: () => {
        return {
          id: '',
          householdCode: '',
          orderName: '',
          orderPayType: '',
          orderPayAmount: '',
          orderTime: '',
          operaPerson: '',
          hasAllReconciliationFlag: '',
          householdName: '',
          householdType: '',
          householdStatus: '',
          previousStatus: '',
          cotyCode: '',
          buildingNumber: '',
          houseNumber: '',
          payType: '',
          villageName: '',
          heatArea: '',
          valiFlag: ''
        }
      }
    }
  },
  data() {
    return {
      payInfoTableVisible: false, // 是否暂时收款打印对话框
      payOrderinfoDataSource: {}, // 住户支付账单信息
      allCotyData: [], // 重构字典数据列表
      Dictdata: [], // 字典数据列表
      allPaidInfoArray: [], // 已交支付的支付信息
      householdStatusList: [], // 住户状态列表
      payTypeList: [], // 缴费类型列表
      payStatusList: [] // 支付状态列表
    }
  },
  watch: {
    payOrderInfo(newdata, prevdata) {
      this.payOrderinfoDataSource = newdata // 回显信息数据
      this.getAllPaidInfoListHandler()
      this.getDictArrayListHandle() // 获取字典数据
      this.getAllDictCotyTypeDataHandle() // 获取重构字典数据
    }
  },
  methods: {
    cancelPrintPayInfo() {
      this.payInfoTableVisible = false
    },
    getToPrintPayInfo() {
      var newWin = window.open('') // 新打开一个空窗口
      var toPrint = document.getElementById('payinfoBox') // 将要被打印的东西
      newWin.document.write(toPrint.outerHTML) // 将打印内容添加进新的窗口
      newWin.document.close() // 在IE浏览器中使用必须添加这一句
      newWin.focus() // 在IE浏览器中使用必须添加这一句
      setTimeout(function() {
        newWin.print() // 打印
      }, 100)
    },
    showSkdModal(paytypeArray, householdStatusArray, payStatusArray) {
      this.payInfoTableVisible = true
      this.householdStatusList = householdStatusArray
      this.payTypeList = paytypeArray
      this.payStatusList = payStatusArray
      this.getDictArrayListHandle() // 获取字典数据
      this.getAllDictCotyTypeDataHandle() // 获取重构字典数据
    },
    getAllPaidInfoListHandler() {
      this.getAllPaidInfoList()
    },
    async getAllPaidInfoList() {
      const res = await getAllHasPaidPayInfoByHouseCode(this.payOrderinfoDataSource.householdCode)
      const data = res.data.main
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        this.allPaidInfoArray = data
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    getDictArrayListHandle() {
      this.getDictArrayList()
    },
    getAllDictCotyTypeDataHandle(reset) {
      this.getAllDictCotyType(reset)
    },
    async getAllDictCotyType(reset) {
      let type = null
      let res = null
      if (reset === 'update') {
        type = 'coty_type-UpDaTe'
        res = await getDictsByType(type)
      } else {
        res = await getDictsByType('coty_type')
      }
      const data = res.data.main
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        this.allCotyData = data
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    async getDictArrayList() {
      const res = await getTreeDictsByType('coty_type')
      const data = res.data.main
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        this.Dictdata = data
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    reUpcaseMoney(price) {
      return digitUppercase(price)
    },
    getDictsValue(code, row) {
      const parentStr = getParentDictsList(this.Dictdata, code)
      const kidStr = getDictsList(this.allCotyData, code)
      const resultStr = parentStr + ' - ' + kidStr + ' - ' + row.villageName + ' - ' + row.buildingNumber + ' - ' + row.houseNumber
      return resultStr
    },
    getHousehodePayTypeListDictsValue(code) {
      return getDictsList(this.payTypeList, code)
    },
    getHouseholdStatusListDictsValue(code) {
      return getDictsList(this.householdStatusList, code)
    }
  }
}
</script>

<style scoped>

</style>
